<template>
  <div>
<!--@select="handleSelect"-->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

      <el-menu-item index="/login">
        <!--<span slot="title" @click="toLogin">登录</span>-->
        <router-link to="Login">登录</router-link>
      </el-menu-item>
      <!--<el-menu-item index="5"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
      <!--顶部头像框-->
      <div class="block">
        <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
      </div>
      <el-submenu style="float: right" index="1">
        <template slot="title">{{username}}</template>
        <el-menu-item>余额: {{wallet}}</el-menu-item>
        <el-menu-item @click="logout">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>


  </div>

</template>

<script>
    export default {
      data() {
        return {
          activeIndex: '/content',
          squareUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
          username: '',
          wallet: 0,
        };
      },
      created:function () {
        this.username = this.$store.getters.username;
        this.wallet = this.$store.state.user.wallet;

      },
      methods: {
        logout() {
          console.log("logout");
          this.$store.commit('resetState');
          console.log(this.$store.getters.username);
          console.log(this.$store.getters.userType);
          this.$router.push('/login');
        }
      }
    }
</script>

<style scoped>
  .block {
    float: right;
  }
</style>
